<template>
	<view class="detail">
		<text style="font-size: 20px;">标题：{{news.title}}</text>
		<view class="d1">
			<text>发布人：{{news.author}}</text>
			<text>发布时间：{{news.createTime}}</text>
		</view>
		<image :src="'http://124.93.196.45:10001'+news.imgUrl" style="width: 100%;"></image>
		<rich-text :nodes="news.content"></rich-text>
		<u-line></u-line>
		<view class="d2">
			<u-icon name="chat" size="35" style="margin-right: 30px;"></u-icon>
			<input type="text" placeholder="发布一条友善的评论吧" v-model="comment"/>
			<u-button type="primary" text="发布" style="width: 80px;" @click="addcomment"></u-button>
		</view>
		<u-line></u-line>
		<u-button type="error" text="查看评论" @click="key=true,key2=false" v-show="key2"></u-button>
		<view class="d4" v-show="key">
			<view class="d3" v-for="item in content" :key="item.id">
				<u-line></u-line>
				<view class="d5">
					<text>{{item.content}}</text>
				</view>
				<u-line></u-line>
			</view>
			<u-button text="收起" @click="key=false,key2=true" color="#ffaa7f"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				title:'',
				news:{},
				comment:'',
				content:[],
				key:false,
				key2:true
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getnews()
			this.getcomment()
		},
		methods: {
			getnews(){
				this.api.get('/prod-api/api/garbage-classification/news/'+this.id).then(res=>{
					this.news=res.data.data
					this.title=res.data.data.title
					uni.setNavigationBarTitle({
						title:this.title
					})
				})
			},
			getcomment(){
				this.api.get('/prod-api/api/garbage-classification/news-comment/list?newsId='+this.id).then(res=>{
					this.content=res.data.rows
				})
			},
			addcomment(){
				if(this.comment===''){
					uni.showToast({
						title:'内容为空',
						icon:'error'
					})
					return
				}else{
					const com={
						content:this.comment,
						newsId:this.id
					}
					this.api.get('/prod-api/api/garbage-classification/news-comment','POST',com).then(res=>{
						if(res.data.code===200){
							setTimeout(function(){
								uni.showToast({
									title:'发布成功'
								})
							},700)
							this.comment=''
						}else{
							setTimeout(function(){
								uni.showToast({
									title:'发布失败'
								})
							},700)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.d1{
	// margin-top: 10px;
	display: flex;
	flex-direction: column;
	line-height: 30px;
}
.d2{
	
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
}
.d5{
	margin-top: 15px;
	margin-bottom: 15px;
}
</style>
